<template>
  <div>
    <h1>登录日志</h1>
    <div>
      <input type="search" placeholder="请输入用户id" v-model="search.userId">
      日期:<input type="datetime-local" v-model="search.startTime">---<input type="datetime-local" v-model="search.endTime">
      <button @click="selLogging">搜索</button>
      <button @click="delLoginLog">删除</button>
      <table border="1px solid #000" style="text-align: center">
        <tr>
          <td><input type="checkbox">全选</td>
          <td>id</td>
          <td>用户id</td>
          <td>登陆时间</td>
          <td>登陆状态</td>
          <td>用户ip</td>
        </tr>
        <tr v-for="login in page.list">
          <td><input type="checkbox" @change="selectedId" v-model="idArray" :value="login.loginId"></td>
          <td>{{login.loginId}}</td>
          <td>{{login.userId == null ? '用户不存在' : login.userId}}</td>
          <td>{{login.loginTime}}</td>
          <td>{{login.ifSuccess == 0 ? '失败' : '成功'}}</td>
          <td>{{login.loginUserIp}}</td>
        </tr>
      </table>
      <div>
        <button id="first" @click="toPage(1)" >首页</button>
        <button id="btnUp" @click="toPage(page.pageNow-1)">上一页</button>
        <input type="text" :value="'当前页数'+page.pageNow">
        <button id="btnDown" @click="toPage(page.pageNow+1)">下一页</button>
        <button id="last" @click="toPage(page.pageTotal)" >尾页</button>
        <span>搜索到{{page.pageCount}}条记录</span>
      </div>
    </div>
  </div>

</template>

<script setup>
import {ref} from "vue";
import api from "@/router/axios.js";

//查询条件
let search = ref({})
let page = ref({
  pageNow: 1, limit: 5
});

//获取登录日志
selLogging();
function selLogging(){
  page.value.list = [];
  let param = {...search.value,...page.value};
  api({url:"/selLogging",
    params:param
  }).then(resp=>{
    page.value = resp.data
    console.log(resp.data)
    // 判断当前页数禁用按钮
    if (page.value.pageNow == 1){
      document.getElementById("btnUp").disabled=true;
      document.getElementById("first").disabled=true;
    }else{
      document.getElementById("btnUp").disabled=false;
      document.getElementById("first").disabled=false;
    }
  })
}

let idArray = ref([])

function selectedId(){
  console.log(idArray.value)
}

// 删除登录记录
function delLoginLog(){
  if (idArray.value.length < 1)
    return;
  api({url:"/delLoginLog",
    params:{"loginIds":idArray.value.join(",")}
  }).then(resp=>{
    alert(resp.data.message)
    page.value.pageNow = 1;
    idArray.value = []
    selLogging()
  })
}


// 更换当前页数
function toPage(num){
  page.value.pageNow=num;
  if (num == page.value.pageTotal){
    document.getElementById("btnDown").disabled=true;
    document.getElementById("last").disabled=true;
  }else{
    document.getElementById("btnDown").disabled=false;
    document.getElementById("last").disabled=false;
  }
  selLogging();
}

</script>

<style scoped>
td{
  min-width: 100px;
}
input[type=text]{
  text-align: center;
  width: 100px;
}
</style>